/*
*	Based in a post on ExtJS' forum at:
*   http://extjs.com/forum/showthread.php?t=14501
*/

Ext.grid.PanelRowExpander = function(config){
    Ext.apply(this, config);
    Ext.grid.PanelRowExpander.superclass.constructor.call(this);
    
    if(this.tpl){
        if(typeof this.tpl == 'string'){
            this.tpl = new Ext.Template(this.tpl);
        }
        this.tpl.compile();
    }
    
    this.state = {};
    this.bodyContent = {};

    this.addEvents({
        beforeexpand : true,
        expand: true,
        beforecollapse: true,
        collapse: true
    });
    
    
        
};

Ext.extend(Ext.grid.PanelRowExpander,Ext.util.Observable, {
    header: "",
    width: 20,
    sortable: false,
    fixed:true,
    dataIndex: '',
    id: 'expander',
    lazyRender : true,
    enableCaching: true,
    items : [],

    getRowClass : function(record, rowIndex, p, ds){
        p.cols = p.cols-1;
        var content = this.bodyContent[record.id];
        if(!content && !this.lazyRender){
            content = this.getBodyContent(record, rowIndex);
        }
        if(content){
            p.body = content;
        }
        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
    },

    init : function(grid){
        this.grid = grid;

        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);

        view.enableRowBody = true;

        grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },
    
    buildTabPanel : function(record, body) {
  	    var panel = new Ext.TabPanel({
  	          activeTab:0,
  	          renderTo : body.id,
              resizeTabs:true, // turn on tab resizing
              minTabWidth: 115,
              tabWidth:135,
              enableTabScroll:true,
              width: 600,
              height:300,
              defaults: {autoScroll:true},
          });
          
          var items = this.items;
           
          for(var i = 0; i < items.length; i++) {
          	panel.add(items[i]).show();
          }
         		            
          return panel;        
    },
    
    getBodyContent : function(record, index, body) {
      if(!this.enableCaching) {
          panel = this.buildTabPanel(record, body);
          return panel;
      }
      var content = this.bodyContent[record.id];
      if (!content) {
          panel = this.buildTabPanel(record, body);
          content = panel;
          this.bodyContent[record.id] = content;
      }
      return content;
    },

    onMouseDown : function(e, t){
        if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
        }
    },

    renderer : function(v, p, record){
        p.cellAttr = 'rowspan="2"';
        return '<div class="x-grid3-row-expander"> </div>';
    },

    beforeExpand : function(record, body, rowIndex){
        if(this.fireEvent('beforexpand', this, record, body, rowIndex) !== false){
            body.id = "expander_detail_" + record.id;
            this.getBodyContent(record, rowIndex, body).render();
            // Workaround to fix style="width: 0px" 
            var el = body.firstChild;
            el.style.width="";
            el = el.firstChild;
            el.style.width="";
            el = el.nextSibling.firstChild;
            el.style.width="";
            el.style.height="";
            
            return true;
        }else{
            return false;
        }
    },

    toggleRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
    },

    expandRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        if(this.beforeExpand(record, body, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, record, body, row.rowIndex);
        }
    },

    collapseRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
        if(this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, record, body, row.rowIndex);
        }
    }
});